<template>
  <div>
    <div>新品首发</div>
    <div class="goodShow">
      <van-row class="goodShow-title">
        <van-col
          span="8"
          :class="index == 1 ? 'active' : ''"
          @click="handle(1)"
        >
          综合
        </van-col>
        <van-col
          span="8"
          :class="index == 2 ? 'active' : ''"
          @click="handle(2)"
        >
          价格
          <van-icon
            name="arrow-up"
            :color="flag == 'up' ? '#CEA62A' : '#C1C1C1'"
          />
          <van-icon
            name="arrow-down"
            :color="flag == 'down' ? '#CEA62A' : '#C1C1C1'"
          />
        </van-col>
        <van-col
          span="8"
          :class="index == 3 ? 'active' : ''"
          @click="handle(3)"
        >
          分类
        </van-col>
      </van-row>
      <div class="goods">
        <div v-for="item in list" :key="item.id" class="goods-item">
          <img :src="item.list_pic_url" alt="" class="goods-img" />
          <p class="goods-name">{{ item.name }}</p>
          <p class="goods-price">{{ item.retail_price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { goods } from "@/axios";
export default {
  name: "goods",

  data() {
    return {
      list: [],
      obj: {
        isHot: "",
        isNew: "",
      },
      index: "",
      flag: "",
    };
  },

  async mounted() {
    if (this.$route.params.val == "isNew") {
      this.obj.isNew = "1";
      this.obj.isHot = "0";
    } else if (this.$route.params.val == "isHot") {
      this.obj.isHot = "1";
      this.obj.isNew = "0";
    } else {
      return;
    }
    this.init();
  },

  methods: {
    async init() {
      let res = await goods(this.obj);
      this.list = res.data;
      console.log(this.list);
    },
    handle(num) {
      this.index = num;
      if (num == 2) {
        if (!this.flag) {
          this.flag = "up";
          this.obj["order"] = "desc";
        } else {
          this.flag = "down";
          this.obj["order"] = "asc";
        }
      } else {
        this.flag = "";
        this.obj["order"] = "";
      }
      this.init();
    },
  },
};
</script>

<style scoped lang="scss">
.goodShow {
  //display: flex;
  //justify-content: space-evenly;
  .goodShow-title {
    .active {
      color: #cea62a;
    }
  }
}
.goods {
  //display: flex;
  width: 710px;
  margin: 0 auto;
  overflow: hidden;
}
.goods-item {
  //display: flex;
  width: 350px;
  float: left;
}
.goods-img {
  width: 350px;
  height: 339px;
}
</style>